mattsresourcesfandomcom-20200216-history
Web Development
Coding and web design: best practices, resources. Covers HTML, CSS, WordPress, quality/integrity testing tools and more. "Old, stale site design scares people off. So do sites that load slowly. And sites that are cluttered with irrelevant ads. And sites that don’t work properly on mobile devices." ''- Sonia Simone on Copyblogger, Apr 5, 2015.'' Developer Tools Code Generation/Repair * Dan's Tools has powerful dev tools, including .htaccess generator * Prefixing CSS for compatibility: http://pleeease.io/play/ * Remembering what to prefix: http://shouldiprefix.com * Generating compatible CSS3: http://css3generator.com/ * CSS centering code generator: http://howtocenterincss.com/ * Pattern designer/generator: http://www.patternify.com/ * CSS3 gradient generator: http://www.colorzilla.com/gradient-editor/ Testing/Validation Tools * Security Headers / Mozilla Observatory: HTTP Security Headers * Test website before domain migration / DNS change: https://hosts.cx ** How to do it: Tutorial * Domain Routing checker: where is my domain routing? (DNS-MX, DNS-A records) * Cross Browser Testing: does what it says on the tin * Screenfly: resize window, test site in various orientations/resolutions! * W3 Validator to check code integrity * Check responsive display (Studiopress service) * Google's Mobile Friendly Test * Facebook's Debugger to see how content displays when shared * KnowEm Social Media Optimizer to test for various social media! * Favicon checker (check) at Real Favicon Generator Resources * How to self-host Google Fonts (google webfonts helper) * In-depth CSS handbook * Full HTML reference table: http://htmlreference.io * CSS hover effect collection: http://ianlunn.github.io/Hover/ * CSS3 gradient collection: https://webgradients.com * Great CSS3 flex cheat sheet | Another one * Flexbox Toolbox: collection of advice/info/tools for CSS flexbox * TinyPNG compresses PNG and JPG images/files * Device Metrics at Google - resolutions & detailed info about many mobile devices! * All-you-need introduction/tutorial for CSS3 animations (W3Schools) * Migrate a site from a multisite network * How to set up a multilingual / multi-language WordPress site * Article: Introduction to responsive web design * Article: Adaptive vs. Responsive Design * Article: CSS transitions & transforms (all about animation) * Free eBook: Creativity and Consistency in UI Design * Free eBook: How to code in HTML5 and CSS3 * Reference for CSS selectors / how to combine them! Best Practices * Article: Avoid sliders! They slow things down and distract, have no additional value * Article: Avoid centered logos in navigation. They confuse users more than they help Design Research & Inspiration * Research: ** Go to Yelp and check pages from my target industry * Best websites built with Beaver Builder: Beaver Bunch * Design inspiration: Awwwards | Abduzeedo | lapa.ninja | Behance | Designspiration * Large collection of web site templates: www.hitectemplates.com * Parallax pages: dustn | redline | FSBOicity | Les Productions Wild Box * More inspiring web pages: Numix | Couchsurfing | Mark Manson | Gary Vaynerchuk | Policymic * Using photography to great effect: Kimberly and the Dreamtime | Radeberger | DB Karriere * Great use of overlay image: Paquin Entertainment * Additional Brilliant Homepage Examples * Blog with full-size cover image * Pure CSS hover menus: www.prowebdesign.ro Layout Creation * Free icon database: flaticon * 50 free social media icon sets * Annarita Tranfici's guide to responsive web design (Jan-Mar, 2013) * Article about full-page background images (aka full-screen) * Full-screen background fix for iOS (iPhone, iPad) (also here) WordPress Plugins * Page Builder: Beaver Builder ** Limited free "lite" version available ** Full version highly recommended ** Extensions: Ultimate Addons | PowerPack | Ninja Beaver | Vapor Modules ** Additional plugins by Brainstorm Force ** Additional plugins by Beaver Team * Duplicate Page for posts, pages, events, galleries, custom post types... * Multi-language (multilingual/for translations): Polylang * Security: Shield Security ** Replaces Akismet! * Personalized short URLs: Pretty Link plugin * Backups and migration: All-in-One WP Migration * SEO: SEO by Yoast * Favicon Generator: Real Favicon Generator * Tags and categories for pages: Post Tags and Categories for Pages * Contact Form: Contact Form 7 * Compress images while uploading: WP Smush * Forum: bbpress * Event Calendar: The Events Calendar * Feature-rich tables: TablePress * Add custom code (e.g. PHP): Code Snippets * Lazy Load: a3 Lazy Load Image/Content Sliders Generally, you're advised not to use content carousels/sliders. * BEST ONE: Smart Slider 3 IE Compatibility Solutions * PIE (Progressive Internet Explorer) ** StackOverflow re. opaque bg ** StackOverflow re. PIE ** PIE Website ** Include behavior: url(PIE.htc); CSS/Coding Solutions Code Snippets Slanted edges ul li.menu-item { background-image: linear-gradient(235deg, white 35px, #333 35px); } Corner frames .corners { width: 60%; font-size: 2em; padding: 80px; margin: 10px auto; text-align: center; background: linear-gradient(red , red)bottom right/ 80px 2px, linear-gradient(red, red) top left / 80px 2px, linear-gradient(red, red) left top/ 2px 80px, linear-gradient(red, red) right bottom / 2px 80px, #FFF; background-repeat:no-repeat; } Links * Placing an underline behind content (content overlaps underline) * Generate content through CSS using content & attr * Stacking context/solutions: jsfiddle | explanation * How to use any font: Google Fonts / Typekit / manual * CSS3 :target tutorial including an awesome gallery! (z-index trick) * Awesome things to do with pseudo elements! (:before, :after) * Stripes in CSS (incl. image overlays): https://css-tricks.com/stripes-css/ * Cycling (rotating) background images: discussion on stackoverflow * Flexbox guide ** https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties ** For old browsers: https://css-tricks.com/using-flexbox/ * Vertically centered horizontal lines before/after element ** http://www.santaclaradesign.com/ ** Examples at StackOverflow ** How to do it: SOLUTION! Animations * Awwwards article for basics/introduction * Button hovering: hover.css * Great collection: animate.css CSS Properties * box-sizing property to control how padding/margin affects box size Fiddles * Experimenting with hover popups (:hover, :target)